<template>
	<div class="search-box" :style="'margin:'+margin+'%;'">
		<div class="tab-div">
			<div class="tab-item" :class="searchType==0 && 'on'" @click="searchType=0">近似</div>
			<div class="tab-item" :class="searchType==1 && 'on'" @click="searchType=1">注册号</div>
			<div class="tab-item" :class="searchType==2 && 'on'" @click="searchType=2">申请人</div>
			<div class="tab-item" :class="searchType==3 && 'on'" @click="searchType=3">机构</div>
		</div>
		<div class="input-div">
			<input class="input" confirm-type="search" v-model="searchKeyword" :placeholder="name" />
			<div class="button" :disabled="searchDisabled">搜索</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		margin: {
			type : Number,
			default : 0
		},
		name: String
	},
	data() {
		return {
			pickers : ['近似','注册号','申请人','机构'],
			searchType : 0,
			searchDisabled : false,
			searchKeyword : ''
		}
	},
	mounted() {
	},
	methods: {
		
	}
}
</script>

<style lang='less'>
	.search-box{
		background: #fff;
		.tab-div {
			padding:0 15px;
			display: flex;
			justify-content: flex-start;
			border-bottom:1px solid #eee;
			.tab-item{
				font-size: 16px;
				color: #666;
				padding: 10px;
			}
			.on{
				color: @primary-color;
				border-bottom:2px solid @primary-color;
			}
		}
		.input-div {
			width: 100%;
			padding: 10px;
			line-height: 60px;
			.button{
				text-align: center;
				height:40px;
				line-height: 40px;
				background : @primary-color;
				color: #fff;
				border-radius:5px;
			}
			.input{
				border:none;
				width: 100%;
				box-sizing: border-box;
				height: 40px;
				line-height: 40px;
				padding-left: 5%;
				border-radius:10px;
				text-align: left;
				font-size: 16px;
				color:#606266;
				background: rgba(230,230,230,.6);
			}
		}
	}
</style>